<!--
 @Description 新闻列表组件-图文混排-多图样式
 @author gaohailan
 @date 2022/11/25
-->
<template>
  <section class="news-list-style-five">
    <section class="item-top">
      <section class="left-title etc3">{{ getMapping(item, 'mainTitle') || '' }}</section>
    </section>
    <ul class="item-center">
      <li v-for="(ite,ind) in imgList" v-if="ind<=8" :key="ind">
        <van-image
          :src="setImgPath(ite)"
          :fit="imgType"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <img
              src="../../images/base/error-icon.png"
              alt
            >
          </template>
        </van-image>
        <div v-if="ind==8&&leaveNum>0 " class="masksNum">+{{ leaveNum }}</div>
      </li>
    </ul>
    <section class="item-bottom">
      <section class="left-txt">
        <span>{{ getMapping(item, 'publishTime') | newFormatTime }}</span>
        <img v-if="item.audioId" src="./images/news-audio.png" alt="">
      </section>
    </section>
  </section>
</template>
<script>
import mixins from '../mixins'
export default {
  name: 'NewsListStyleFive',
  mixins: [mixins],
  // components: { EmptyPage },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      imgList: [],
      leaveNum: 0
    }
  },
  created() {
    if (this.item.smallCoverImgId) {
      this.imgList = this.item.smallCoverImgId.split(',')
      if (this.imgList.length > 9) {
        this.leaveNum = this.imgList.length - 9
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';
.news-list-style-five {
  box-sizing: border-box;
  padding: rem(20);
  position: relative;

  .item-top {
    flex: 1;

    .left-title {
      font-size: rem(30);
      font-weight: bold;
      text-align: left;
      color: #333333;
      line-height: 1.5;
    }
  }

  .item-bottom {
    flex: 1;
    padding-right: rem(10);

    .left-txt {
      margin-top: rem(10);
      font-size: rem(22);
      font-family: PingFang SC Regular, PingFang SC Regular-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > img {
        width: rem(49);
        height: rem(49);
      }
      > span {
        display: inline-block;
        margin-right: rem(20);
      }
    }
  }

  .item-center {
    margin-top: rem(24);
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    > li {
      flex: 0 0 auto;
      width: 32%;
      height: rem(148);
      border-radius: rem(8);
      display: inline-block;
      margin-right: rem(10);
      margin-bottom: rem(10);
      position: relative;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .van-image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: rem(8);
        background: #c9c9c9;
        position: relative;
        overflow: hidden;

        .van-image__error {
          > img {
            width: rem(120);
            height: rem(120);
          }
        }
      }

      .masksNum {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba($color: #000000, $alpha: 0.4);
        position: absolute;
        line-height: rem(148);
        text-align: center;
        color: #fff;
        font-size: rem(30);
        border-radius: rem(8);
      }

    }
  }
}
</style>
